<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EShopManager</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/static/lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/stylesheets/theme.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/lib/font-awesome/css/font-awesome.css" />
<script src="${pageContext.request.contextPath}/static/lib/jquery-1.8.1.min.js" type="text/javascript"></script>
<%--<script src="${pageContext.request.contextPath}/static/lib/ckeditor/ckeditor.js" type="text/javascript"></script>--%>
<script src="${pageContext.request.contextPath}/static/lib/vue.js" type="text/javascript"></script>

<!-- Demo page code -->

<style type="text/css">
#line-chart {
	height: 300px;
	width: 800px;
	margin: 0px auto;
	margin-top: 1em;
}

.brand {
	font-family: georgia, serif;
}

.brand .first {
	color: #ccc;
	font-style: italic;
}

.brand .second {
	color: #fff;
	font-weight: bold;
}
</style>



</head>
<body>
<c:import url="top.jsp"></c:import>
<c:import url="left.jsp"></c:import>

	<div class="content" id="app">
		<div class="header">
			<h1 class="page-title">图书管理</h1>
		</div>

		<ul class="breadcrumb">
			<li><a href="bookmanager.jsp">图书管理</a> <span class="divider">/</span></li>
			<li class="active">添加图书信息</li>
		</ul>



		<div class="container-fluid">

			<div class="row-fluid">

				<div class="btn-toolbar">
					<button class="btn btn-primary" id="btnSave" @click="saveBook">
						<i class="icon-save"></i> 保存
					</button>
				</div>
				<div class="well">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#basicInfo" data-toggle="tab">通用信息</a></li>
						<li><a href="#desInfo" data-toggle="tab">详细描述</a></li>
						<li><a href="#otherInfo" data-toggle="tab">其他信息</a></li>
					</ul>
					
					<!-- 通用信息 -->
					<div id="myTabContent" class="tab-content">
						<div class="tab-pane active in" id="basicInfo">
							<form id="uploadForm" enctype="multipart/form-data">
								<label>书籍名称</label>
								<input type="text" name="book_name" class="input-xlarge"> 
								
								<label>书籍分类</label> 
								<select name="parent_type_id" class="input-xlarge" @change="changeParentType($event)">
									<option value="">--请选择分类--</option>
									<option v-for="(item,index) in parentTypesData" :key="index" :value="item.type_id">{{item.type_name}}</option>
								</select>
								<select name="type_id" id="DropDownTimezone2" class="input-xlarge">
									<option value="">--请选择子分类--</option>
									<option v-for="(item,index) in childTypesData" :key="item.type_id" :value="item.type_id">{{item.type_name}}</option>
								</select>
								
								<label>本店售价</label> 
								<input type="text" name="book_price" class="input-xlarge">
								
								<label>市场价</label> 
								<input type="text" name="book_price_old" class="input-xlarge"> 
								
								<label>作者</label> 
								<input type="text" name="book_author" class="input-xlarge">
								
								<label>出版社</label> 
								<input type="text" name="book_press" class="input-xlarge">
								
								<label>上传商品图片</label>
								<input type="file" name="book_logo_big" id="book_logo_big"
                       					placeholder="请选择商品图片" class="input-xlarge" />
						        
								<label>上传商品缩略图</label> 
								<input type="file" name="book_logo_small" id="book_logo_small"
                       					placeholder="请选择商品缩略图" class="input-xlarge" />
                       					
							</form>
						</div>
						
						<!-- 详细描述 -->
						<div class="tab-pane fade" id="desInfo">
							<form id="tab2">
								<textarea name="book_description" style="width: 90%" cols="10" rows="20"></textarea>
								<!--  
								<script type="text/javascript">
									CKEDITOR.replace('book_description');
								</script>
								-->
							</form>
							  
							<iframe id="api_iframe_51240" name="api_iframe_51240" src="" width="90%" height="500px" scrolling="no" frameborder="0"></iframe>
<%--								<script type="text/javascript">--%>
<%--									//接口生成：https://www.51240.com/api/--%>
<%--									document.getElementById("api_iframe_51240").src = "https://www.51240.com/apiiframe/?api_from=51240&api_url=https://zaixianwangyebianji.51240.com/&api_width=98%&api_backgroundcolor=FFFFFF";--%>
<%--								</script>--%>
							
						</div>
						
						<!-- 其他信息 -->
						<div class="tab-pane fade" id="otherInfo">
							<form id="uploadForm2">
								<label>上传商品子图</label> 
								<input type="file" name="pic_name1" id="pic_name1" class="input-xlarge" />
								<input type="file" name="pic_name2" id="pic_name2" class="input-xlarge" />
								<input type="file" name="pic_name3" id="pic_name3" class="input-xlarge" />
								<input type="file" name="pic_name4" id="pic_name4" class="input-xlarge" />
								<input type="file" name="pic_name5" id="pic_name5" class="input-xlarge" />
								<br /><br />
								
								<label>商品库存数量</label> 
								<input type="text" name="store_count" value="1" class="input-xlarge" />
								<br /><br />
								
								<label>
								是否新品：&nbsp;&nbsp;
								<input type="radio" name="is_new" value="10" />是&nbsp;&nbsp;
								<input type="radio" name="is_new" value="0" checked="checked" />否
								</label>
								<br />
								
								<label>
								是否热销：&nbsp;&nbsp;
								<input type="radio" name="is_hot" value="10" />是&nbsp;&nbsp;
								<input type="radio" name="is_hot" value="0" checked="checked" />否
								</label>
								<br />
								
								<label>
								上架：&nbsp;&nbsp;
								<input type="checkbox" name="status" value="1" checked="checked" />
								打勾表示允许销售，否则不允许销售
								</label>
								
							</form>
						</div>
					</div>

				</div>

			</div>

			<%-- 引入尾部页面 --%>
			<c:import url="footer.jsp"></c:import>
		</div>
	</div>

	<script>
		let appObj = new Vue({
			el: "#app",
			data: {
				parentTypesData: [], //父级数据（包含子级数据）
				childTypesData: []  //子级数据
			},
			methods: {
				//获取所有分类，包括父子分类
				getAllType(){
					$.post("${pageContext.request.contextPath }/type/getAllType.action",function(response){
						appObj.parentTypesData = response.data
					})
				},
				//获取二级分类
				getChildTypes(parentId){
					for(let i = 0; i < appObj.parentTypesData.length; i++){
						if(parentId == appObj.parentTypesData[i].type_id){
							console.log(appObj.parentTypesData[i])
							//获取子级
							appObj.childTypesData = appObj.parentTypesData[i].childList
						}
					}
				},
				//父级分类改变获取子级分类
				changeParentType(event){
					let parentId = event.target.value
					//调用获取子级分类的方法,传递父级id
					this.getChildTypes(parentId)
				},
				//添加图书
				saveBook(){
					//调用上传图片的方法
					this.uploadPicture()
				},
				//图片上传
				uploadPicture(){
					let  book_logo_big = $("#book_logo_big")[0].files[0];
					let  book_logo_small = $("#book_logo_small")[0].files[0];
					let  pic_name1 = $("#pic_name1")[0].files[0];
					let  pic_name2 = $("#pic_name2")[0].files[0];
					let  pic_name3 = $("#pic_name3")[0].files[0];
					let  pic_name4 = $("#pic_name4")[0].files[0];
					let  pic_name5 = $("#pic_name5")[0].files[0];




					let formData = new FormData();
					formData.append("book_logo_big",book_logo_big)
					formData.append("book_logo_small",book_logo_small)
					formData.append("pic_name1",pic_name1)
					formData.append("pic_name2",pic_name2)
					formData.append("pic_name3",pic_name3)
					formData.append("pic_name4",pic_name4)
					formData.append("pic_name5",pic_name5)

					$.ajax({
						url: '${pageContext.request.contextPath }/upload/uploadPicture.action',
						type: 'POST',
						cache: false,
						data: formData,
						processData: false,
						contentType: false
					}).done(function(res) {
						console.log("======done=======")
						console.log(res)
					}).fail(function(res) {
						console.log("======fail=======")
						console.log(res)
					});
				}
			},
			created(){
				//页面加载调用此方法
				this.getAllType()
			}
		})
	</script>
	<script src="${pageContext.request.contextPath}/static/lib/bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/tooltips.js"></script>









<%--	<script type="text/javascript">--%>
<%--		$("[rel=tooltip]").tooltip();--%>
<%--		--%>
<%--		--%>
<%--		$(function() {--%>
<%--			//加载一级分类列表--%>
<%--		    var url="type/parentlist.action";--%>
<%--			var data={--%>
<%--					type_id:0--%>
<%--			};--%>
<%--			$.post(url,data,function(response){--%>
<%--				var jsonData=$.parseJSON(response);--%>
<%--				var selectInnerHTML="<option value=''>--请选择分类--</option>";--%>
<%--				for (var i = 0; i < jsonData.typeList.length; i++) {--%>
<%--					var typeInfo=jsonData.typeList[i];--%>
<%--					selectInnerHTML+="<option value='"+typeInfo.type_id+"'>"+typeInfo.type_name+"</option>";--%>
<%--				}--%>
<%--				$("select[name='parent_type_id']").html(selectInnerHTML);--%>

<%--			});	--%>
<%--			--%>
<%--			--%>
<%--			//加载二级分类列表--%>
<%--			$("select[name='parent_type_id']").change(function(){--%>
<%--				var type_id=$(this).children('option:selected').val();//这就是selected的值--%>
<%--				var	data2={--%>
<%--						type_id:type_id--%>
<%--				};--%>
<%--				$.post(url,data2,function(response){--%>
<%--					var jsonData=$.parseJSON(response);--%>
<%--					var selectInnerHTML="<option value=''>--请选择子分类--</option>";--%>
<%--					for (var i = 0; i < jsonData.typeList.length; i++) {--%>
<%--						var typeInfo=jsonData.typeList[i];--%>
<%--						selectInnerHTML+="<option value='"+typeInfo.type_id+"'>"+typeInfo.type_name+"</option>";--%>
<%--					}--%>
<%--					$("select[name='type_id']").html(selectInnerHTML);--%>

<%--				});--%>
<%--			});--%>
<%--			--%>
<%--		});--%>
<%--		--%>
<%--		--%>
<%--		$(function() {--%>
<%--			$('.demo-cancel-click').click(function() {--%>
<%--				return false;--%>
<%--			});--%>
<%--			--%>
<%--			$("#btnSave").click(function(){--%>
<%--				var book_name=$("input[name='book_name']").val();--%>
<%--				var type_id=$("select[name='type_id']").val();--%>
<%--				var book_price=$("input[name='book_price']").val();--%>
<%--				var book_price_old=$("input[name='book_price_old']").val();--%>
<%--				var book_author=$("input[name='book_author']").val();--%>
<%--				var book_press=$("input[name='book_press']").val();--%>
<%--				var book_logo_big=$("input[name='book_logo_big']").val();--%>
<%--				var book_logo_small=$("input[name='book_logo_small']").val();--%>
<%--				//var book_description=CKEDITOR.instances.book_description.getData();--%>
<%--				--%>
<%--				var book_description=$("textarea[name='book_description']").val();--%>
<%--				//alert(book_description);--%>
<%--				//return;--%>
<%--				--%>
<%--				var store_count=$("input[name='store_count']").val();--%>
<%--				var is_new=$("input[name='is_new']:checked").val().trim();--%>
<%--				var is_hot=$("input[name='is_hot']:checked").val().trim();--%>
<%--				var status=0;--%>
<%--				if ($("input[name='status']").get(0).checked) {--%>
<%--					status=1;--%>
<%--				}--%>
<%--				--%>
<%--				--%>
<%--				if(book_name==''){--%>
<%--			  		show_err_msg('请输入书籍名称');--%>
<%--			  	}else if (type_id=='') {--%>
<%--			  		show_err_msg('请先选择书籍分类，再选择子分类');--%>
<%--				}else if (book_price=='') {--%>
<%--			  		show_err_msg('请输入售价');--%>
<%--				}else if (book_price_old=='') {--%>
<%--			  		show_err_msg('请输入市场价');--%>
<%--				}else if (book_author=='') {--%>
<%--			  		show_err_msg('请输入作者');--%>
<%--				}else if (book_press=='') {--%>
<%--			  		show_err_msg('请输入出版社');--%>
<%--				}else if (book_logo_big=='') {--%>
<%--			  		show_err_msg('请选择商品图片');--%>
<%--				}else if (book_logo_small=='') {--%>
<%--			  		show_err_msg('请选择商品缩略图');--%>
<%--				}else if (book_description=='') {--%>
<%--			  		show_err_msg('请输入详细描述');--%>
<%--				}else if (store_count=='') {--%>
<%--			  		show_err_msg('请输入商品库存');--%>
<%--				}else{--%>
<%--					show_loading();--%>
<%--					uploadImg(book_name,type_id,book_price,book_price_old,book_author,book_press,book_description,--%>
<%--							store_count,is_new,is_hot,status,book_logo_big);--%>
<%--				}--%>
<%--			--%>
<%--				--%>
<%--			});--%>
<%--			--%>
<%--			--%>
<%--		});--%>
<%--		--%>
<%--		--%>
<%--		function uploadImg(book_name,type_id,book_price,book_price_old,book_author,book_press,book_description,--%>
<%--				store_count,is_new,is_hot,status,fileName){--%>
<%--			var headFile = fileName.substr(fileName.indexOf("."));--%>
<%--		    if(headFile=='.jpg' || headFile=='.jpeg' || headFile=='.png'){--%>
<%--		    	//开始上传图片--%>
<%--		    	show_loading();--%>
<%--		    	var formData=new FormData();--%>
<%--		    	formData.append("fileImg", $("input[name='book_logo_big']")[0].files[0]);--%>
<%--		    	formData.append("fileImg", $("input[name='book_logo_small']")[0].files[0]);--%>
<%--		    	--%>
<%--		    	$.ajax({--%>
<%--		    	    url: 'upload.action',--%>
<%--		    	    type: 'POST',--%>
<%--		    	    cache: false,--%>
<%--		    	    data: formData,--%>
<%--		    	    processData: false,--%>
<%--		    	    contentType: false--%>
<%--		    	}).done(function(res) {--%>
<%--		    		var jsonData=$.parseJSON(res);--%>
<%--					if (jsonData.status==200) {--%>
<%--						requestAddBook(book_name,type_id,book_price,book_price_old,book_author,book_press,--%>
<%--								jsonData.fileArray[0],jsonData.fileArray[1],book_description,--%>
<%--								store_count,is_new,is_hot,status);--%>
<%--					}else{--%>
<%--						show_err_msg('上传图片失败');--%>
<%--					}--%>
<%--		    	}).fail(function(res) {--%>
<%--		    		show_err_msg('上传图片失败');--%>
<%--		    	});--%>
<%--		    	--%>
<%--		    }else{--%>
<%--		    	show_err_msg('不支持该图片类型，请上传jpg、jpeg、png格式的图片');--%>
<%--		    }--%>
<%--			--%>
<%--		}--%>
<%--		--%>
<%--		function requestAddBook(book_name,type_id,book_price,book_price_old,book_author,book_press,--%>
<%--				book_logo_big,book_logo_small,book_description,--%>
<%--				store_count,is_new,is_hot,status){--%>
<%--			//ajax请求servlet--%>
<%--		    var url="books/add.action";--%>
<%--			var data={--%>
<%--					book_name:book_name,--%>
<%--					type_id:type_id,--%>
<%--					book_price:book_price,--%>
<%--					book_price_old:book_price_old,--%>
<%--					book_author:book_author,--%>
<%--					book_press:book_press,--%>
<%--					book_logo_big:book_logo_big,--%>
<%--					book_logo_small:book_logo_small,--%>
<%--					book_description:book_description,--%>
<%--					store_count:store_count,--%>
<%--					is_new:is_new,--%>
<%--					is_hot:is_hot,--%>
<%--					status:status--%>
<%--			};--%>
<%--			--%>
<%--			$.post(url,data,function(response){--%>
<%--				var jsonData=$.parseJSON(response);--%>
<%--				var result=jsonData.status;--%>
<%--				--%>
<%--				var responseUrl="books/query.action";--%>
<%--				if(result=="200"){--%>
<%--					--%>
<%--					//判断是否有选择“商品子图”--%>
<%--					var pic_name1=$("input[name='pic_name1']").val();--%>
<%--					var pic_name2=$("input[name='pic_name2']").val();--%>
<%--					var pic_name3=$("input[name='pic_name3']").val();--%>
<%--					var pic_name4=$("input[name='pic_name4']").val();--%>
<%--					var pic_name5=$("input[name='pic_name5']").val();--%>
<%--					if (pic_name1!='' || pic_name2!='' || pic_name3!='' || pic_name4!='' || pic_name5!='') {--%>
<%--						//上传商品子图--%>
<%--						uploadOtherImgs(jsonData.book_id);--%>
<%--					}else{--%>
<%--						show_msg('操作成功',responseUrl);--%>
<%--					}--%>
<%--					--%>
<%--				}else{--%>
<%--					show_err_msg('操作失败');--%>
<%--				}--%>

<%--			});--%>
<%--		}--%>
<%--		--%>
<%--		//上传商品子图--%>
<%--		function uploadOtherImgs(book_id){--%>
<%--			//开始上传图片--%>
<%--	    	show_loading();--%>
<%--	    	$.ajax({--%>
<%--	    	    url: 'uploadOtherPics.action',--%>
<%--	    	    type: 'POST',--%>
<%--	    	    cache: false,--%>
<%--	    	    data: new FormData($("#uploadForm2")[0]),--%>
<%--	    	    processData: false,--%>
<%--	    	    contentType: false--%>
<%--	    	}).done(function(res) {--%>
<%--	    		var jsonData=$.parseJSON(res);--%>
<%--				if (jsonData.status==200) {--%>
<%--					var picArray=jsonData.picArray;--%>
<%--					requestAddPic(book_id,picArray.join(","));--%>
<%--				}else{--%>
<%--					show_err_msg('上传图片失败');--%>
<%--				}--%>
<%--	    	}).fail(function(res) {--%>
<%--	    		show_err_msg('上传图片失败');--%>
<%--	    	});--%>
<%--		}--%>
<%--		--%>
<%--		//添加图片路径到pic--%>
<%--		function requestAddPic(book_id,picArray){--%>
<%--			//ajax请求servlet--%>
<%--		    var url="books/addBookPic.action";--%>
<%--			var data={--%>
<%--					book_id:book_id,--%>
<%--					picArray:picArray--%>
<%--			};--%>
<%--			--%>
<%--			$.post(url,data,function(response){--%>
<%--				var jsonData=$.parseJSON(response);--%>
<%--				var result=jsonData.status;--%>
<%--				--%>
<%--				var responseUrl="books/query.action";--%>
<%--				if(result=="200"){--%>
<%--					//show_err_msg('测试成功');--%>
<%--					show_msg('操作成功',responseUrl);--%>
<%--				}else{--%>
<%--					show_err_msg('操作失败');--%>
<%--				}--%>

<%--			});--%>
<%--		}--%>
<%--		--%>
<%--		--%>
<%--		--%>
<%--	</script>--%>

</body>
</html>